<template>
  <BasicModal
    v-bind="$attrs"
    :title="modalInfo.title"
    @register="tenantRegister"
    :width="845"
    :minHeight="420"
    :height="520"
    centered
    :showOkBtn="false"
    cancelText="关闭"
  >
    <div class="box-tenant">
      <a-input-search
        v-model:value.trim="modalInfo.name"
        placeholder="搜索企业名称"
        allowClear
        style="width: 280px; margin-bottom: 16px"
        @search="onSearch"
      />
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'rpaType'">
            <span v-if="record.rpaType == 1">云端基础</span>
            <span v-else-if="record.rpaType == 2">云端VIP</span>
            <span v-else-if="record.rpaType == 3">本地基础</span>
            <span v-else>--</span>
          </template>
          <template v-else-if="column.dataIndex === 'multipleInvoicersPackageCount'">
            <span v-if="record.multipleInvoicersPackageCount">{{ record.multipleInvoicersPackageCount }}个</span>
            <span v-else></span>
          </template>
        </template>
      </BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { message } from 'ant-design-vue'
import IconFont from '@/components/IconFont/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { cloneDeep } from 'lodash-es'
import api from '@/api'

const { topOrgTenantId } = api

const modalInfo = reactive({
  name: '',
  title: '',
  topOrgTenantId: ''
})
const [registerTable, { reload, setPagination, setTableData, setProps }] = useTable({
  api: topOrgTenantId,
  columns: [
    {
      title: '企业名称',
      dataIndex: 'orgName'
    },
    {
      title: '企业税号',
      dataIndex: 'taxesNumber'
    },
    {
      title: '开票终端类型',
      width: 140,
      dataIndex: 'rpaType'
    },
    {
      title: '已购买开票员数量',
      dataIndex: 'multipleInvoicersPackageCount'
    }
  ],
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: true }, // 只有一页时隐藏分页器
  showIndexColumn: true
})

const onSearch = () => {
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })
  setProps({
    searchInfo: {
      topOrgTenantId: modalInfo.topOrgTenantId,
      orgName: modalInfo.name
    }
  })
  reload()
}
const [tenantRegister, { setModalProps, closeModal }] = useModalInner((data) => {
  let record = cloneDeep(data.record)
  modalInfo.title = `${record.orgName}-下级企业`
  modalInfo.name = ''
  modalInfo.topOrgTenantId = record.tenantId
  setTableData([])
  onSearch()
})
</script>
<style lang="less" scoped>
.box-tenant {
  padding: 8px 4px 0;
}
</style>
